<html>
<head>
    <title>The Matrix</title>
    <meta charset="utf-8">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script>
        /*
        11     ① 用setInterval(draw, 33)设定刷新间隔
        12
        13     ② 用String.fromCharCode(1e2+Math.random()*33)随机生成字母
        14
        15     ③ 用ctx.fillStyle=’rgba(0,0,0,.05)’; ctx.fillRect(0,0,width,height); ctx.fillStyle=’#0F0′; 反复生成opacity为0.5的半透明黑色背景
        16
        17     ④ 用x = (index * 10)+10;和yPositions[index] = y + 10;顺序确定显示字母的位置
        18
        19     ⑤ 用fillText(text, x, y); 在指定位置显示一个字母 以上步骤循环进行，就会产生《黑客帝国》的片头效果。
        20 */
        $(document).ready(function () {
            //设备宽度
            var s = window.screen;
            var width = q.width = s.width;
            var height = q.height;
            var yPositions = Array(300).join(0).split('');
            var ctx = q.getContext('2d');
            var draw = function () {
                ctx.fillStyle = 'rgba(0,0,0,.05)';
                ctx.fillRect(0, 0, width, height);
                ctx.fillStyle = 'green';/*代码颜色*/
                ctx.font = '10pt Georgia';
                yPositions.map(function (y, index) {
                    text = String.fromCharCode(1e2 + Math.random() * 330);
                    x = (index * 10) + 10;
                    q.getContext('2d').fillText(text, x, y);
                    if (y > Math.random() * 1e4) {
                        yPositions[index] = 0;
                    } else {
                        yPositions[index] = y + 10;
                    }
                });
            };
            RunMatrix();

            setTimeout(function () {
                location.href = "index.html";
            },5000)

            function RunMatrix() {
                Game_Interval = setInterval(draw, 30);
            }
        });
    </script>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #121212;
            font-family: 'Arial', sans-serif;
            overflow: hidden;
        }

        .container {
            position: relative;
            width: 300px;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loading-text {
            position: absolute;
            color: #fff;
            font-size: 24px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
            z-index: 10;
        }

        .countdown {
            position: absolute;
            font-size: 72px;
            font-weight: bold;
            color: #00ff88;
            text-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88;
            opacity: 0;
            transform: scale(0);
            animation: pulse 1s infinite;
        }

        .ring {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #00ff88;
            animation: rotate 2s linear infinite;
        }

        .ring:nth-child(2) {
            width: 180px;
            height: 180px;
            border-top-color: #ff00aa;
            animation: rotate 3s linear infinite reverse;
        }

        .ring:nth-child(3) {
            width: 160px;
            height: 160px;
            border-top-color: #00aaff;
            animation: rotate 4s linear infinite;
        }

        .dots {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            animation: rotate 10s linear infinite;
        }

        .dots::before {
            content: '';
            position: absolute;
            top: 10px;
            left: 50%;
            width: 10px;
            height: 10px;
            background: #ff5500;
            border-radius: 50%;
            box-shadow:
                    0 0 0 2px rgba(255,85,0,0.2),
                    0 0 0 4px rgba(255,85,0,0.2),
                    0 0 0 6px rgba(255,85,0,0.2);
            transform: translateX(-50%);
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes pulse {
            0% { transform: scale(0.5); opacity: 0; }
            50% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(0.5); opacity: 0; }
        }

        .completed {
            position: absolute;
            color: #fff;
            font-size: 24px;
            opacity: 0;
            transform: scale(0);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="loading-text">生成中...</div>
    <div class="countdown">3</div>
    <div class="ring"></div>
    <div class="ring"></div>
    <div class="ring"></div>
    <div class="dots"></div>
    <div class="completed">完成!</div>
</div>
<script>
    const countdown = document.querySelector('.countdown');
    const loadingText = document.querySelector('.loading-text');
    const completedText = document.querySelector('.completed');

    let counter = 3;

    const timer = setInterval(() => {
        if (counter > 0) {
            countdown.textContent = counter;
            countdown.style.animation = 'none';
            void countdown.offsetWidth; // 触发重绘
            countdown.style.animation = 'pulse 1s infinite';
            counter--;
        } else {
            clearInterval(timer);
            countdown.style.display = 'none';
            loadingText.style.display = 'none';

            // 显示完成文本
            completedText.style.opacity = '1';
            completedText.style.transform = 'scale(1)';
            completedText.style.transition = 'all 0.5s ease-out';

            // 停止动画
            document.querySelectorAll('.ring, .dots').forEach(el => {
                el.style.animation = 'none';
            });
        }
    }, 1000);
</script>

<div align="center" style=" position:fixed; left:0; top:0px; width:100%; height:100%;">
    <canvas id="q" width="1440" height="1900"></canvas>
</div>
</body>
</html>